<template>
	<view class="enjoy-detail">
		<!-- 倒计时 -->
		<view class="enjoy-detail-time">
			<view class="time-cut" data-text="20:00">
				20:00
			</view>
			<view class="text left-text" data-text="倒计时">
				倒计时
			</view>
			<view class="text right-text" data-text="抢票冲">
				抢票冲
			</view>
			<image :src="imageUrl('platform-time-bg.png')" mode="" class="platform-time-bg" />
		</view>

		<!-- 门票 -->
		<view class="enjoy-ticket mgt-30" @click="payPopup=true">
			<!-- 背景图片 -->
			<image :src="imageUrl('wireless-play-tickets.png')" mode="" class="enjoy-ticket-bg"
				:data-text="ticketText" />
			<!-- 左侧商品图片 -->
			<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="enjoy-ticket-pic" />
			<!-- 右侧信息 -->
			<view class="enjoy-ticket-right">
				<view class="title" data-text="畅玩专区门票">
					畅玩专区门票
				</view>
				<view class="time">
					<image :src="imageUrl('enjoy-time-miniicon.png')" mode="" class="mini-icon" />
					<text>畅玩时间：20 分钟</text>
				</view>
				<view class="time">
					<image :src="imageUrl('enjoy-money-icon.png')" mode="" class="mini-icon" />
					<text>畅玩票价：¥ 6680</text>
				</view>
			</view>
		</view>

		<!-- 龙虎榜 -->
		<view class="enjoy-detail-title mgt-40">
			<view class="title" data-text="龙虎榜">
				龙虎榜
			</view>
			<image :src="imageUrl('enjoy-tit-four.png')" mode="" class="enjoy-tit-four" />
		</view>

		<!-- 用户列表 -->
		<view class="user-pic-list mgt-20">
			<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic-item"
				v-for="item in 10" />
		</view>

		<!-- 盲盒一览 -->
		<view class="enjoy-detail-title mgt-40">
			<view class="title" data-text="盲盒一览">
				盲盒一览
			</view>
			<image :src="imageUrl('enjoy-tit-four.png')" mode="" class="enjoy-tit-four" />
		</view>

		<!-- 盲盒列表 -->
		<view class="enjoy-blind-list">
			<view class="enjoy-blind-box" @click="goTo('/pages/enjoyspace/EnjoyIottery')">
				<!-- 盲盒图片 -->
				<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="blind-box-pic" />
				<!-- 边框 -->
				<image :src="imageUrl('enjoy-blind-box.png')" mode="" class="blind-box-bg" />

				<!-- 盲盒名称 -->
				<view class="blind-box-name">
					<text class="border-line" :class="{'red':true}">一番赏</text>
					<text>商品名称商商品名称商商品名称商商品名称商商品名称商</text>
				</view>
			</view>
			<view class="enjoy-blind-box" @click="goTo('/pages/enjoyspace/EnjoyBurst')">
				<!-- 盲盒图片 -->
				<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="blind-box-pic" />
				<!-- 边框 -->
				<image :src="imageUrl('enjoy-blind-box.png')" mode="" class="blind-box-bg" />

				<!-- 盲盒名称 -->
				<view class="blind-box-name">
					<text class="border-line" :class="{'orange':true}">爆爆赏</text>
					<text>商品名称商商品名称商商品名称商商品名称商商品名称商</text>
				</view>
			</view>
		</view>

		<!-- 确认订单弹出层 -->
		<u-popup :show="payPopup" :closeable="true" @close="payPopup=false">
			<view class="go-car-popup">
				<view class="go-car-tit">
					确认订单
				</view>
				<view class="go-car-body public345">
					<view class="go-car-item">
						<text>20分钟畅玩门票</text>
						<text>¥108/张</text>
					</view>
					<view class="go-car-item">
						<text>实付金额</text>
						<text>￥6680.00</text>
					</view>
					<view class="way-box">
						<view class="way-tip">支付方式</view>
						<!-- 遍历三种支付方式 -->
						<!-- 余额不足时 样式类名 cannot -->
						<view class="way" v-for="(one,index) in threePayWay" :key="index">
							<!-- 左侧盒子 -->
							<view class="way-left">
								<!-- 支付方式logo -->
								<image class="image" :src="imageUrl(one.iconPath)" mode="" />
								<view class="way-main">
									<!-- 名称 -->
									<view class="way-name">
										{{one.name}}
									</view>
									<!-- 余额 -->
									<view class="rest-money">
										{{one.rest}}
									</view>
								</view>
							</view>
							<!-- 右侧单选框 -->
							<uni-icons :type="index===checkedIndex?'checkbox-filled':'circle'" size="26"
								:color="index===checkedIndex?'#FF7803':'#D0D0D0'" class="way-right"
								@click="changeCheckedIndex(index)"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 确认支付 -->
				<view class="agree-pay">
					<view class="agree">
						<uni-icons type="circle" color="#D0D0D0" size="30rpx" class="icon"></uni-icons>
						<text>我已阅读并同意</text>
						<text style="color: #FF7803;">《用户购买协议》</text>
						<text style="color: #FF7803;">《发货须知》</text>
					</view>
					<!-- 按钮 -->
					<view class="agree-btn" @click="agreeBtn">
						确认支付
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 提示框 -->
		<u-popup :show="showTip" mode="center" bgColor="transparent" :safeAreaInsetBottom="false"
			@close="showTip=false">
			<view class="tip-popup">
				<image :src="imageUrl('enjoy-tip-popup.png')" mode="" class="tip-bg" data-text="畅玩提示" />
				<view class="tip-content" v-if="false">
					您的20分钟畅玩门票正在生效
					中，中途离开倒计时依然正常
					计时，您确定要离开吗？
				</view>
				<view class="tip-content">
					您的20分钟畅玩门票已到时间
					了！更多好物，狂抽不停，快
					抢票上车继续冲吧！
					<view class="lighter">(赏品已帮您放进背包)</view>
				</view>
				<text class="btn left-btn" @click="clickTipLeft">直接退出</text>
				<text class="btn right-btn" @click="clickTipRight">继续畅玩</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ticketText: '开启畅玩',
				// 提示框弹出层
				showTip: true,
				// 确认订单弹出层
				payPopup: false,
				// 三种支付方式
				threePayWay: [{
					iconPath: 'burst-point.png',
					name: '爆点支付',
					rest: '爆点：99.62'
				}, {
					iconPath: 'rest-pay.png',
					name: '余额支付',
					rest: '余额：99.62'
				}, {
					iconPath: 'wx-pay.png',
					name: '微信支付',
					rest: '微信支付订单'
				}],
				checkedIndex: 0,
			}
		},
		methods: {
			// 改变选中的支付方式
			changeCheckedIndex(v) {
				// 需要判断余额是否足够支付
				this.checkedIndex = v
			},
			agreeBtn() {
				console.log('agreeBtn')
			},
			clickTipLeft() {
				console.log('clickTipLeft')
			},
			clickTipRight() {
				console.log('clickTipRight')
			},
			goTo(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: '20分钟/畅玩专区'
			// })
		},
		// onUnload() {
		// 	uni.showToast({
		// 		title: 'onUnload',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
	}
</script>

<style lang="scss">
	page {
		background: #0A0A0A;
	}

	.mgt-20 {
		margin-top: 20rpx;
	}

	.mgt-30 {
		margin-top: 30rpx;
	}

	.mgt-40 {
		margin-top: 40rpx;
	}

	.enjoy-detail {
		padding: 0 30rpx;

		// 倒计时
		.enjoy-detail-time {
			position: relative;
			width: 690rpx;
			height: 140rpx;

			.time-cut {
				position: absolute;
				top: 20rpx;
				left: 50%;
				font-family: YouSheBiaoTiHei;
				font-size: 60rpx;
				font-weight: normal;
				font-size: 60rpx;
				color: #000;
				transform: translate(-50%);

				&::before {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
					-webkit-text-stroke: 8rpx #48FFFD;
				}
			}

			// 文本
			.text {
				position: absolute;
				top: 70rpx;
				font-family: YouSheBiaoTiHei;
				font-size: 36rpx;
				font-weight: normal;
				line-height: 36rpx;
				color: #000;
				z-index: 0;

				&::before {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
					-webkit-text-stroke: 8rpx #FF7803;
				}

				&.left-text {
					left: 10rpx;
				}

				&.right-text {
					right: 10rpx;
				}
			}

			// 底部背景
			.platform-time-bg {
				position: absolute;
				top: 100rpx;
				left: 50%;
				width: 690rpx;
				height: 24rpx;
				transform: translate(-50%);
			}
		}

		// 门票
		.enjoy-ticket {
			position: relative;

			// 门票背景
			.enjoy-ticket-bg {
				position: relative;
				width: 690rpx;
				height: 276rpx;

				&::after {
					position: absolute;
					right: 14rpx;
					bottom: 0;
					content: attr(data-text);
					color: #FF7803;
					font-family: YouSheBiaoTiHei;
					font-size: 44rpx;
				}
			}

			// 商品图片
			.enjoy-ticket-pic {
				position: absolute;
				top: 40rpx;
				left: 20rpx;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
				border: 1px solid;
				border-image: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.00) 50%, #FFFFFF 100%) 1;
			}

			.enjoy-ticket-right {
				position: absolute;
				top: 40rpx;
				left: 300rpx;
				color: #fff;
				font-size: 28rpx;

				.title {
					position: relative;
					font-family: YouSheBiaoTiHei;
					font-size: 40rpx;
					line-height: 48rpx;
					color: #FF7803;
					z-index: 0;

					&::after {
						content: attr(data-text);
						position: absolute;
						left: 0;
						z-index: -1;
						-webkit-text-stroke: 8rpx #fff;
					}
				}

				.time {
					display: flex;
					align-items: center;
					line-height: 52rpx;

					.mini-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.enjoy-detail-title {
			display: flex;
			align-items: flex-end;

			.title {
				position: relative;
				font-family: YouSheBiaoTiHei;
				color: #000;
				font-size: 48rpx;
				line-height: 60rpx;
				z-index: 0;

				&::before {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
					-webkit-text-stroke: 6rpx #48FFFD;
				}
			}

			.enjoy-tit-four {
				width: 136rpx;
				height: 60rpx;
				margin-left: 20rpx;
			}
		}

		// 用户列表
		.user-pic-list {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			width: 690rpx;
			height: 96rpx;
			// background: #000;
			box-sizing: border-box;
			border: 2rpx solid transparent;
			border-radius: 48rpx;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			// border-image: linear-gradient(266deg, #48FFFD 0%, rgba(72, 255, 253, 0.00) 28%, rgba(72, 255, 253, 0.00) 69%, #48FFFD 99%) 1;
			background-image: linear-gradient(to right, #000, #000), linear-gradient(266deg, #48FFFD 0%, rgba(72, 255, 253, 0.00) 28%, rgba(72, 255, 253, 0.00) 69%, #48FFFD 99%);
			box-shadow: inset 0 0 5rpx 5rpx rgba(72, 255, 253, 0.1);

			.user-pic-item {
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #fff;
				border-radius: 50%;

				&:nth-child(1) {
					border: 2rpx solid #F51F43;
				}

				&:nth-child(2) {
					border: 2rpx solid #C9437C;
				}

				&:nth-child(3) {
					border: 2rpx solid #FF7803;
				}
			}
		}

		.enjoy-blind-list {
			display: flex;
			flex-wrap: wrap;

			.enjoy-blind-box {
				position: relative;
				width: 220rpx;
				height: 320rpx;
				margin: 40rpx 14rpx 0 0;

				&:nth-child(3n) {
					margin: 40rpx 0 0;
				}

				// 盲盒图片
				.blind-box-pic {
					position: absolute;
					width: 220rpx;
					height: 220rpx;
					padding: 5rpx;
					border-radius: 30rpx 30rpx 0 0;
					box-sizing: border-box;
				}

				// 盲盒背景
				.blind-box-bg {
					position: absolute;
					width: 220rpx;
					height: 320rpx;
				}

				// 盲盒名称
				.blind-box-name {
					position: absolute;
					bottom: 30rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					color: #fff;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

					.border-line {
						width: 62rpx;
						height: 26rpx;
						padding: 2rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;
						box-sizing: border-box;
						border: 1rpx solid #FF7803;
						font-size: 18rpx;
						line-height: 18rpx;
						color: #FF7803;

						// 一番赏
						&.red {
							border: 1rpx solid #F51F43;
							color: #F51F43;
						}

						// 爆爆赏
						&.orange {
							border: 1rpx solid #FF7803;
							color: #FF7803;
						}
					}
				}
			}
		}

		// 上车弹出层
		.go-car-popup {
			width: 100vw;
			font-size: 26rpx;
			background: #1C1C1C;
			color: #fff;

			// 确认订单
			.go-car-tit {
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				line-height: 88rpx;
			}

			.go-car-body {
				.go-car-item {
					display: flex;
					justify-content: space-between;
					line-height: 72rpx;
				}

				// 支付方式
				.way-box {
					margin-top: 18rpx;

					.way-tip {
						line-height: 94rpx;
					}

					// 三种方式
					.way {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						// 分隔线
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

						.way-left {
							display: flex;

							.image {
								width: 46rpx;
								height: 46rpx;
								margin: 20rpx 32rpx 0 0;
							}

							.way-main {
								line-height: 44rpx;

								.way-name {
									font-size: 26rpx;
									font-weight: 500;
								}

								// 支付余额
								.rest-money {
									font-size: 24rpx;
									color: #999;
								}
							}
						}

						// 支付方式右侧选中框
						.way-right {
							margin-top: 20rpx;
						}

						// 余额不足时的样式
						&.cannot {
							opacity: .5;

							.way-right {
								display: none;
							}
						}
					}

					// 清除最后一项的下边框
					.way:last-child {
						border: 0;
					}
				}
			}

			// 确认支付
			.agree-pay {
				padding-bottom: 16rpx;
				text-align: center;

				.agree {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #999;

					.icon {
						margin-right: 18rpx;
						vertical-align: bottom;
					}
				}

				.agree-btn {
					width: 690rpx;
					margin: 24rpx auto 0;
					line-height: 88rpx;
					border-radius: 44rpx;
					background: #FF7803;
				}
			}
		}

		/deep/.u-safe-area-inset-bottom {
			background: #1C1C1C;
		}

		// 提示弹出层
		.tip-popup {
			position: relative;
			width: 580rpx;
			height: 514rpx;

			.tip-bg {
				position: relative;
				width: 580rpx;
				height: 514rpx;

				&::after {
					position: absolute;
					top: 0;
					right: 16rpx;
					content: attr(data-text);
					font-family: YouSheBiaoTiHei;
					font-size: 36rpx;
					line-height: 52rpx;
					color: #FF7803;
				}
			}

			.tip-content {
				position: absolute;
				top: 120rpx;
				padding: 0 40rpx 0 60rpx;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 52rpx;
				color: #fff;

				.lighter {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 52rpx;
					color: rgba(255, 255, 255, 0.6);
				}
			}

			// 按钮
			.btn {
				position: absolute;
				bottom: 0;
				right: 0;
				font-family: YouSheBiaoTiHei;
				font-size: 36rpx;
				font-weight: normal;
				line-height: 48rpx;
				color: #fff;

				&.left-btn {
					right: 260rpx;
				}

				&.right-btn {
					right: 36rpx;
				}
			}
		}
	}
</style>